<template>
    <div class="box">
        <!-- 导航栏 -->
        <navList title="订单详情"></navList>

        <!-- 地址栏 -->
        <van-address-list v-model="chosenAddressId" :list="list" add-button-text="去支付" disabled-text=""
            default-tag-text="默认" @add="onAdd" @edit="onEdit">

            <van-cell-group>
                <van-cell title="创建时间:" :value="detail.create_time" />
                <van-cell title="订单编号:" :value="detail.orderId" />
                <van-cell title="订单描述:" :value="detail.product_code" />
                <van-cell title="订单价格:" :value="(detail.totalPrice / 100).toFixed(2)" />
                <van-cell title="创建人:" :value="detail.username" />
            </van-cell-group>
        </van-address-list>


    </div>
</template>

<script setup>
import navList from "@/components/navList.vue"

import { ref } from "vue"

import { payApi, getOrderApi } from "@/api/api"

import { useRoute, useRouter } from 'vue-router'
const router = useRouter()
const route = useRoute()

let orderId = ref(route.query.orderId)
// console.log(orderId.value)

import { showToast } from 'vant';

const chosenAddressId = ref('1');
const list = [
    {
        id: '1',
        name: '张三',
        tel: '13000000000',
        address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室',
        isDefault: true,
    },
];

let detail = ref({})
const detailList = () => {
    getOrderApi(orderId.value).then((res) => {
        console.log(res)
        detail.value = res.data.data
    })
}
detailList()


const onAdd = () => {
    let obj = {
        orderId: orderId.value,
        subject: "请使用支付宝支付",
        totalPrice: (detail.value.totalPrice / 100).toFixed(2)
    }
    payApi(obj).then((res) => {
        // console.log(res)
        window.open(res.data.data,"blank")
    })
}
const onEdit = (item, index) => showToast('编辑地址:' + index);

</script>

<style lang="scss" scoped>
.box {
    width: 100%;
    height: 100%;
}
</style>